<template>
  <el-card>
    <div slot="header" class="cardClass_header">
      <h3>个人信息管理</h3>
      <div>
        <el-button
            type="primary"
            size="mini"
            @click="dialogVisible = true"
            style="float: right"
        >修改个人信息</el-button
        >
      </div>
    </div>
    <div>
      <el-descriptions
          class="margin-top"
          :column="3"
          size="small"
          slot="header"
          border
      >
        <el-descriptions-item>
          <template slot="label"> 姓名 </template>
          {{ userInformation.userName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 性别 </template>
          {{ userInformation.userGender }}
        </el-descriptions-item>
        <!-- <el-descriptions-item>
        <template slot="label"> 用户头像路径 </template>
        {{ userInformation.userImg }}
      </el-descriptions-item> -->
        <el-descriptions-item>
          <template slot="label"> 用户电话（账号） </template>
          {{ userInformation.userTel }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 用户密码 </template>
          {{ userInformation.userPassword }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 电子邮箱 </template>
          {{ userInformation.userEmail }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 备注 </template>
          {{ userInformation.userNotes }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 工作店铺 </template>
          {{
            !userInformation.userWorkstore
                ? "未分配"
                : userInformation.userWorkstore
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 职务 </template>
          {{
            !userInformation.userAppointment
                ? "未分配"
                : userInformation.userAppointment
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 状态 </template>
          <el-tag size="small">{{
              userInformation.userState === 0 ? "离职" : "在职"
            }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 用户身份 </template>
          <el-tag size="small">{{
              userInformation.userIdentity === 0 ? "管理员" : "销售员"
            }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 创建时间 </template>
          {{ userInformation.userCreatedate }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-dialog
        title="修改个人信息"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
    >
      <el-form ref="ruleForm" :model="ruleForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :xl="8" :lg="8">
            <el-form-item label="姓名:" prop="userName">
              <el-input v-model="ruleForm.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8">
            <el-form-item label="性别:" prop="userGender">
              <el-input v-model="ruleForm.userGender"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :xl="8" :lg="8">
            <el-form-item label="用户头像路径:" prop="userImg">
              <el-input v-model="ruleForm.userImg"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :xl="8" :lg="8">
            <el-form-item label="用户电话:" prop="userTel">
              <el-input v-model="ruleForm.userTel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8">
            <el-form-item label="备注:" prop="userNotes">
              <el-input v-model="ruleForm.userNotes"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8">
            <el-form-item label="状态:" prop="userState">
              <el-input v-model="ruleForm.userState"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8">
            <el-form-item label="用户身份:" prop="userIdentity">
              <el-input v-model="ruleForm.userIdentity"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8">
            <el-form-item label="用户密码:" prop="userPassword">
              <el-input v-model="ruleForm.userPassword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8">
            <el-form-item label="电子邮箱:" prop="userEmail">
              <el-input v-model="ruleForm.userEmail"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8">
            <el-form-item label="开始日期" prop="userCreatedate">
              <el-date-picker
                  v-model="ruleForm.userCreatedate"
                  type="date"
                  placeholder="选择开始日期"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-form-item class="dialog-footer">
            <el-button type="primary" @click="update">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>

  </el-card>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  ToolboxComponent,
  LegendComponent,
} from "echarts/components";
import {BarChart, PieChart} from "echarts/charts";
import {LabelLayout} from "echarts/features";
import {CanvasRenderer} from "echarts/renderers";

echarts.use([
  TooltipComponent,
  GridComponent,
  BarChart,
  CanvasRenderer,
  PieChart,
  LabelLayout,
  ToolboxComponent,
  LegendComponent,
]);

import {
  searchuser,
  updatePersonalInformation,
  getFormatYear,
  getFormatDay,
} from "@/apis/system/personalInformation.js";

export default {
  data() {
    return {
      flag: true, // 比哦之
      dialogVisible: false,
      size: "",
      userInformation: "",
      ruleForm: {
        userAppointment: null,
        userCreatedate: "",
        userEmail: "",
        userGender: "",
        userIdentity: "",
        userImg: "",
        userId: "",
        userName: "",
        userNotes: "",
        userPassword: "",
        userState: "",
        userTel: "",
        userWorkstore: null,
      },
      form: {
        id: "",
        userId: "",
      },
    };
  },
  created() {
    const _this = this;
    _this.getuser();
  },
  mounted() {
    this.$nextTick(() => {
      this.drawBar();
      this.drawpie();
    });
  },
  methods: {
    //:更新信息
    update() {
      const _this = this;
      if (this.ruleForm.userState === "离职") {
        this.ruleForm.userState = 0;
      } else {
        this.ruleForm.userState = 1;
      }
      if (this.ruleForm.userIdentity === "管理员") {
        this.ruleForm.userIdentity = 0;
      } else {
        this.ruleForm.userIdentity = 1;
      }
      updatePersonalInformation(_this.ruleForm)
          .then((res) => {
            if (res.code === 0) {
              _this.$alert("信息" + res.msg, "提示", {
                confirmButtonText: "确定",
                callback: (action) => {
                },
              });
            }
          })
          .catch(() => {
          });
      this.dialogVisible = false;
    },
    //:获取信息
    getuser() {
      const user = localStorage.getItem("userData");
      searchuser(user).then((res) => {
        this.userInformation = res.data;
        this.ruleForm = res.data;
        if (this.ruleForm.userState === 0) {
          this.ruleForm.userState = "离职";
        } else {
          this.ruleForm.userState = "在职";
        }
        if (this.ruleForm.userIdentity === 0) {
          this.ruleForm.userIdentity = "管理员";
        } else {
          this.ruleForm.userIdentity = "销售员";
        }
      });
    },
    //:关闭对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {
          });
    },
  },
}

</script>

<style scoped>
.box-card {
  width: 49%;
}

.clearfix {
  padding: 20px 0;
}

.dialog-footer {
  float: right;
  margin: 20px 20px;
}

.tubiao {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

/deep/ .tubiao .el-card__body {
  padding: 0px;
}
</style>